import React, { use, useEffect, useState } from 'react';
import type { FormProps } from 'antd';
import { Button, Checkbox, Flex, Form, Input } from 'antd';
import type { Auth } from '../apis/auth/type';
import { getAuthCode, login } from '../apis/auth/auth';
import { UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
export default function Login() {

  const dispatch = useDispatch();

  const navigate = useNavigate();
  // interface FieldType  {
  //   username?: string;
  //   password?: string;
  //   remember?: string;
  // };

  const loginStyle: React.CSSProperties = {
   
    width: '100%',
    backgroundColor: '#fff',
    padding:'0px 40px'

  }
  const buttonStyle: React.CSSProperties = {
    width: '100%',
    height:50,
    
  }
  const topStlye: React.CSSProperties = {
    display:'flex',
    justifyContent:'center',
    lineHeight:'50px',
    paddingBottom:20,
  }
  const inputStyle = {

      height:50
  }

  const [codeImgSrc, setCodeImgSrc] = useState('');
  const [imgToken, setImgToken] = useState('');
  const getCodeImg = async () => {
    const res = await getAuthCode();
    setCodeImgSrc(res.imageCode);

    setImgToken(res.token);

    form.setFieldValue("token", res.token);

  }
  useEffect(() => {
    getCodeImg();
  }, [])
  // getCodeImg();
  const onFinish: FormProps<Auth>['onFinish'] = async (values) => {

    console.log(values);

    console.log('提交的数据:', { ...values, token: imgToken });
    const res = await login({ ...values, token: imgToken }).catch(() => undefined);

    if (res) {

      console.log("登录成功", res.menu);
      console.log("登录成功", res);

      dispatch({type: "UpdateToken", data: res.token});
      dispatch({type: "UpdateMenus", data: res.menu.filter(item=>item.postion==='left')})


      // sessionStorage.setItem("menus",JSON.stringify(res.menu.filter(item=>item.postion==='left')));
      // sessionStorage.setItem("token", res.token);

      navigate("/index");

      return;
    }

    console.log("登录失败");



  };

  const [form] = Form.useForm();



  return (
    <div style={loginStyle}>
        <div style={topStlye}>

        <h1 style={{fontSize:'20px'}}>登录</h1>
        </div>

     
        <Form
          name="basic"
          form={form}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item<Auth>
            label=""
            name="username"
            rules={[{ required: true, message: '请输入账号!' }]}
          >
            <Input prefix={<UserOutlined />} style={inputStyle} />
          </Form.Item>

          <Form.Item<Auth>
            label=""
            name="pass"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password prefix={<UserOutlined />} style={inputStyle} />
          </Form.Item>

          <Form.Item>
            <Flex align='center'>
              <Form.Item<Auth>
                label=""
               
                name="verifyCode"
                rules={[{ required: true, message: '请输入验证码!' }]}
              >
                <Input prefix={<UserOutlined />} style={{...inputStyle,width: '200px',marginRight:'10px'}} />

              </Form.Item>
              <div style={{marginBottom:15}}>
                {
                  codeImgSrc &&  <img onClick={getCodeImg} style={{ height: "50px" }} src={codeImgSrc} alt="验证码"></img>
                }
           
              </div>
             
            </Flex>

          </Form.Item>


          <Form.Item label="">
            <Button style={buttonStyle} type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      
    </div>
  );
}